
{% extends 'base.html' %}
{% load static %}
{% block title %}界面{% endblock %}
{% block css %}
<link href="{% static 'login.css' %}" rel="stylesheet" />
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
    }

    .container {
        margin-top:60px;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f9f9f9;
    }

    h1 {
        font-size: 24px;
        color: #555;
        margin-bottom: 20px;
    }

    .tabs {
        display: flex;
        cursor: pointer;
        margin-bottom: 20px;
    }

    .tab {
        flex: 1;
        padding: 10px;
        text-align: center;
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        margin-right: -1px;
        user-select: none;
    }

    .tab.active {
        background-color: #e1e1e1;
        font-weight: bold;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:hover {
        background-color: #e1e1e1;
    }

    a {
        display: block;
        margin-bottom: 10px;
        text-decoration: none;
        color: #0099ff;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <h1 style="text-align: center">日志查询页面</h1>

    <div class="tabs">
        <div class="tab active" data-tab="tab1">用户日志</div>
        <div class="tab" data-tab="tab2">资源日志</div>
{#        <div class="tab" data-tab="tab3">数据库3</div>#}
    </div>

    <div class="tab-content active" id="tab1">
        <table>
            <tr>
                <th>日志ID</th>
                <th>日志类型</th>
                <th>发生时间</th>
                <th>源IP</th>
                <th>用户ID</th>
                <th>内容</th>
                <th>等级</th>
                <th>相关ID</th>
                <th>状态</th>
                <th>操作者</th>
                <th>操作时间</th>
                <th>管理</th>
            </tr>
            {% for efflog in efflog %}
            <tr>
                <td>{{ efflog.LogID }}</td>
                <td>{{ efflog.LogType }}</td>
                <td>{{ efflog.OccurTime}}</td>
                <td>{{ efflog.SourceIP}}</td>
                <td>{{ efflog.userID }}</td>
                <td>{{ efflog.Content }}</td>
                <td>{{ efflog.Level }}</td>
                <td>{{ efflog.RelatedID }}</td>
                <td>{{ efflog.Status }}</td>
                <td>{{ efflog.Handler }}</td>
                <td>{{ efflog.HandleTime }}</td>
                <td >
                    <a href="../logdel/?LogID={{ efflog.LogID }}">
                        删除
                    </a>
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>

    <div class="tab-content" id="tab2">
        <table>
            <tr>
                <th>日志ID</th>
                <th>日志时间</th>
                <th>CPU</th>
                <th>Memory</th>
                <th>Disk</th>
                <th>Network</th>
                <th>Temperature</th>
                <th>Reason</th>
            </tr>
            {% for syslog in syslog %}
            <tr>
                <td>{{ syslog.LogID }}</td>
                <td>{{ syslog.logtime}}</td>
                <td>{{ syslog.cpuusage }}</td>
                <td>{{ syslog.memusage}}</td>
                <td>{{ syslog.diskusage }}</td>
                <td>{{ syslog.netusage }}</td>
                <td>{{ syslog.temp }}</td>
                <td>{{ syslog.reason}}</td>
                <td >
                    <a href="../sysdel/?LogID={{ syslog.LogID }}">
                        删除
                    </a>
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabs = document.querySelectorAll('.tab');
        const contents = document.querySelectorAll('.tab-content');

        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                tabs.forEach(t => t.classList.remove('active'));
                contents.forEach(c => c.classList.remove('active'));

                tab.classList.add('active');
                document.getElementById(tab.getAttribute('data-tab')).classList.add('active');
            });
        });
    });
</script>
{% endblock %}
